<template>
  <div>
    <ul class="tdwhBox">
      <li class="item">
        <div class="left-view">
          <div class="temp-min">{{ framStore.weacherFarmItem.tempMin }}</div>
          <div>
            <p>/{{ framStore.weacherFarmItem.tempMax }}°C</p>
            <p style="font-weight:600;font-size:15px;">{{ framStore.weacherFarmItem.textDay }}</p>
          </div>
        </div>
        <div class="right-view">
          <i style="font-size:40px;" :class="`qi-${framStore.weacherFarmItem.icon}`" />
        </div>
      </li>
      <li class="item" style="position: relative;">
        <div class="left-view">
          <div class="temp-min">{{ framStore.weacherFarmItem.precip }}</div>
          <div>
            <p>mm</p>
            <p>降雨量</p>
          </div>
        </div>
        <div class="right-view">
          <img
            style="position: absolute;
          height: 70px;
          right: 10px;
          top: 50%;
          margin-top: -30px;"
            src="@/assets/weather/js.png"
          >
        </div>
      </li>
      <li class="item" style="display: block;text-align:left;position: relative;">
        <div class="title-name">天气预警</div>
        <p style="font-size:15px;font-weight:600;padding-top:5px">{{ summary }}</p>
        <img
          style="position: absolute;
          height: 70px;
          right: 10px;
          top: 50%;
          margin-top: -30px;"
          src="@/assets/weather/yj.png"
        >
      </li>
      <li class="item" style="display: block;text-align:left;position: relative; z-index: 10;">
        <div class="title-name" style="padding-bottom:4px;">灾害预警</div>
        <div class="yunysbox">
            <span v-for="dt in JSON.parse(framStore.weacherFarmItem.warning)" :key="dt.id" :style="'background-color: '+dt.severityColor">
              {{ dt.typeName }}
            </span>
        </div>
        <p class="yjtitle">
          <template v-if="framStore.weacherFarmItem.warning">
            <span v-for="dt in JSON.parse(framStore.weacherFarmItem.warning)" :key="dt.id" style="font-size: 13px;">
              {{ dt.title }}
            </span>
          </template>
          <template v-else>无</template>
        </p>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useFramStore } from '@/pinia/modules/farm'
const framStore = useFramStore()
import { getPredictionWeather } from '@/api/plant'
const summary = ref('')
const get_Prediction_Weather = (location) => {
  getPredictionWeather(location).then(res => {
    summary.value = res.summary
  })
}
console.log(framStore.weacherFarmItem, '========')

defineExpose({ get_Prediction_Weather })
</script>

<style lang="scss" scoped>
.tdwhBox{
    display: flex;
    list-style: none;
    padding: 10px;
    margin: 0;
    li{
        text-align: center;
        height:60px;
        border: 1px solid #eef0ef;
        padding: 10px 15px;
        background-color: #f8f9f9;
        width:25%;
        background-image: url(@/assets/weather/bg1.png);
        background-position: center;
        background-repeat: no-repeat;
        justify-content: space-between;
        align-items: center;
        .left-view{
          display:flex;
          align-items: center;
          font-size:16px;
          color:#333;
          .temp-min{
             font-size: 40px;
             font-weight: 600;
             color: #101010;
             padding-right:4px;
          }
        }
        &+li{
            margin-left: 10px;
        }
        &.item{
            flex: 1;
            display: flex;
            .title-name{
                font-size: 16px;
                color: #333;
                padding-bottom:10px;
                font-weight:600;
                padding-top:5px;
            }
        }
        .yj{
            display: flex;
            justify-content: center;
            span{
                padding: 0 5px;
                //background-color: #037b27;
                color: #000;
                height: 20px;
                line-height: 20px;
                margin: 0 2px 0 0;
            }
        }
    }
    li:nth-child(2){
      background-image: url(@/assets/weather/bg2.png);
    }
    li:nth-child(3){
      background-image: url(@/assets/weather/bg3.png);
    }
    li:nth-child(4){
      background-image: url(@/assets/weather/bg4.png);
    }
}
.yunysbox{
  position: absolute;
  z-index: 10;
  right: 7px;
  top: 11px;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  span{
    padding:0 4px;
    font-size: 12px;
    color: #333;
    height: 22px;
    line-height: 22px;
    margin: 0;
    &+span{
      margin-left: 2px;
    }
  }
}
.yjtitle{
  max-height: 34px;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
